<template>
    <div>
      <div
        id="myEcharts3"
        :style="{ height: `${echartsH}px`, width: `${echartsW}px` }"
      ></div>
    </div>
  </template>
    
    <script>
  import * as Echarts from "echarts";
  
  export default {
    data() {
      return {
        echartsW: (window.innerWidth - 400) / 2,
        echartsH: window.innerHeight / 2 + 0,
        // echartsW: (document.body.clientWidth - 400) / 2,
        // echartsH: document.body.clientHeight / 2 + 100,
      };
    },
    methods: {
      drawLine() {
        var myChart = Echarts.init(document.getElementById("myEcharts3"));
        var option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
        myChart.setOption(option);
      },
    },
    mounted() {
      this.drawLine();
    },
  };
  </script>
    
    <style lang="less" scoped>
  #myEcharts1 {
    margin-top: 40px;
    //   width: 500px;
    //   height: 400px;
    background-color: rgb(255, 255, 255);
  }
  </style>